<template>
  <div class="voice-recognition">
    <el-card class="voice-recognition-card">
      <h1>语音识别</h1>
      <div class="file-selector">
        <el-input
          v-model="filePath"
          placeholder="请选择 WAV 文件"
          readonly
          class="file-path-input"
        >
          <template #append>
            <el-button @click="selectFile" type="primary">选择文件</el-button>
          </template>
        </el-input>
      </div>
  <el-button
   type="success"
    @click="execute"
    :disabled="!filePath || loading"
    :loading="loading"
    class="execute-button"
  >
  执行
  </el-button>
      <div class="result-container">
        <h2>识别结果:</h2>
        <el-input
          v-model="result"
          type="textarea"
          :rows="6"
          readonly
          placeholder="识别结果将显示在这里"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { recognize } from '@/api/recognize';
import { ElLoading } from 'element-plus';

// 文件路径
const filePath = ref('');
// 识别结果
const result = ref('');
// 选择的文件对象
const selectedFile = ref(null);
// 加载状态
const loading = ref(false);

// 选择 WAV 文件
const selectFile = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.style.display = 'none';
  input.accept = '.wav'; // 限制文件类型为 WAV

  input.addEventListener('change', () => {
    if (input.files && input.files.length > 0) {
      const file = input.files[0];
      filePath.value = file.name;
      selectedFile.value = file;
    }
  });

  input.click(); // 触发文件选择器
};

// 执行语音识别
const execute = async () => {
  if (!selectedFile.value) {
    ElMessage.warning('请选择文件');
    return;
  }

  const formData = new FormData();
  formData.append('file', selectedFile.value);

  loading.value = true;
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '识别中...',
    background: 'rgba(0, 0, 0, 0.7)',
  });

  try {
    const response = await recognize(formData);
    if(response.data.code == 200){
      const data = response.data.data;
      result.value = data.text || data; // 显示识别结果
      ElMessage.success('识别成功');
    }else{
      ElMessage.error('识别失败，请稍后重试');
    }
  } catch (error) {
    console.error('Error:', error);
    result.value = '识别失败: ' + error.message;
    ElMessage.error('识别失败，请稍后重试');
  } finally {
    loading.value = false;
    loadingInstance.close();
  }
};
</script>

<style scoped>
.voice-recognition {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.voice-recognition-card {
  width: 600px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #303133;
}

.file-selector {
  margin-bottom: 20px;
}

.file-path-input {
  margin-bottom: 10px;
}

.execute-button {
  width: 100%;
  margin-bottom: 20px;
}

.result-container h2 {
  margin-bottom: 10px;
  color: #606266;
}
</style>